<script setup lang="ts">
import { ref, reactive, computed } from "vue";
import { graphic } from "echarts/core";
import { currentGET } from "@/api";
const props = defineProps({
    width: {
        type: String,
        default: '100%'
    },
    height: {
        type: String,
        default: '100%'
    },
    chartOptions: {
        type: Object,
        default: () => {}
    },
    indicator: {
        type: Array,
        default: () => { }
    },
    series: {
        type: Array,
        default: () => { }
    }
})
let colors = ["#49BBAA", "#34A7DE", "#49BBAA", "#9A9EFE", "#49BBAA"];
// const option = ref({});
// const state = reactive({
//   lockNum: 0,
//   offlineNum: 0,
//   onlineNum: 0,
//   alarmNum: 0,
//   totalNum: 0,
// });
const echartsGraphic = (colors: string[]) => {
  return new graphic.LinearGradient(1, 0, 0, 0, [
    { offset: 0, color: colors[0] },
    { offset: 1, color: colors[1] },
  ]);
};
// const getData = () => {
//   currentGET("pie").then((res) => {
//     console.log(res);
//     if (res.success) {
//       state.lockNum = res.data.lockNum;
//       state.offlineNum = res.data.offlineNum;
//       state.onlineNum = res.data.onlineNum;
//       state.totalNum = res.data.totalNum;
//       state.alarmNum = res.data.alarmNum;
//       setOption();
//     }
//   });
// };
// getData();
const option = computed(() => {
    console.log(props.chartOptions,'props.chartOptions');

  return {
    //你的代码
    legend: {
      show:false,
      bottom: 0,
      data: ['领取数量', '核销数量'],
    },
    tooltip: {
      // trigger: 'axis',
      backgroundColor: 'rgba(3, 9, 24,1)',
      textStyle: {
        color: 'rgba(255, 255, 255, 1)',
      },
    },
      grid: props.chartOptions?.grid || {
          top: 53,
          left: 5,
          right: 0,
          bottom: 0,
          containLabel: true,
      },
    radar: {
      axisName: {
        color: '#fff',
        fontSize: 14,
      },
      // radius: '60%',
        // splitNumber: 4,
        radius: props.chartOptions?.radar?.radius || '48',//缩放
      indicator: props.indicator,
    },
    series: [
      {
        type: 'radar',
        data: props.series,
      },
    ],
  };
});
</script>

<template>
  <v-chart class="chart" :style="{'width': width,'height': height}" :option="option" />
</template>

<style scoped lang="less"></style>
